<template>
  <div class="app-container">
    <!-- Header 头部区域 -->
    <div class="header-container">
        <img src="@/images/logo.png" alt="" height="40px">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="index">商城中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的订单</template>
        <el-menu-item index="2-1">待付款</el-menu-item>
        <el-menu-item index="2-2" @click="deliver">待发货</el-menu-item>
        <el-menu-item index="2-3" @click="address">收货地址</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>客服中心</el-menu-item>
      <el-menu-item index="4" @click="Goods">订单管理</el-menu-item>
      <!-- <el-menu-item index="4" @click="Goods"> </el-menu-item> -->
    </el-menu>

    </div>
    <!-- 用组件方式循环渲染每一个商品的信息 -->
    <!-- <keep-alive>
      <component :is="comName" @cart="cart" @single="single"></component>
    </keep-alive> -->
    <!-- keep-alive 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性-->
    <keep-alive>
     <router-view></router-view>
    </keep-alive>
  </div>
  
</template>

<script>
import Goods from '@/components/Goods/Goods.vue'
import Index from '@/components/Index/Index.vue'
import Single from '@/components/Single/Single.vue'
import Address from '@/components/Address/Address.vue'

export default {
  data(){
    return{
      comName: "Index"
    }
  },
  methods:{
    Goods(){
      this.$router.push('/goods')
    },
    deliver(){
      this.$router.push('/deliver')
    },
    address(){
      this.$router.push('/address')
    },
    index(){
      this.$router.push('/index')
    },
  },
  components: {
    Goods,Index,Single,Address
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 60px;
  // padding-top: 45px;
  padding-bottom: 50px;
} 
.header-container {
  font-size: 12px;
  height: 60px;
  // height: 45px;
  width: 100%;
  background-color: #545c64;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>
